<template>
    <el-container class="container">
        <el-header>Main Header</el-header>
        <el-container>
            <el-aside width="120px">
                <Menu></Menu>
            </el-aside>
            <el-main>
                <p>{{ urlInfo }}</p>
                <button @click="testHashChange">测试Hash变化</button>
                <button @click="testHistoryAPI">测试History API</button>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import Menu from "@/components/Menu.vue"
export default {
    name: 'Home',
    components: { Menu },
    data() {
        return {
            urlInfo: null,
        }
    },
    mounted() {
        console.log("window.location信息", window.location);
        // 监听hash变化
        window.addEventListener('hashchange', (e) => {
            console.log('hashchange触发', e);
            this.urlInfo = `Hash变化事件触发:
            - 新hash: ${window.location.hash}
            - 完整URL: ${window.location.href}
            - 时间: ${new Date().toLocaleTimeString()}`;
            this.updateCurrentInfo();
        });
        // 监听popstate事件（history模式）触发条件：历史记录变化时都触发（包括hash变化）
        window.addEventListener('popstate', (e) => {
            console.log('Popstate事件触发', e);//新页面可以用e.state获取到上一个页面的传参（或者history.state
            // ）history.replaceState({ formData }, '', window.location.href);
            this.urlInfo = `Popstate事件触发:
            - 状态: ${JSON.stringify(e.state)}
            - 当前路径: ${window.location.pathname}
            - 时间: ${new Date().toLocaleTimeString()}`;
            this.updateCurrentInfo();
        });
        // 基于HTML5 History API
        // 主要方法：
        // history.pushState(state, title, url)    // 添加历史记录，不会触发popstate
        // history.replaceState(state, title, url) // 替换当前历史记录，不会触发popstate
        // history.go(n)     n可以正数也可以负数                     // 前进后退
        // history.back()                         // 后退 106
        // history.forward()                      // 前进 75  120   70？
        // 165 98 70
        // 170 
        // 175 108
        // 180 112 73
        // 185 116 74
    },
    methods: {
        testHashChange() {
            // 手动修改hash测试
            const randomHash = '/test-' + Math.random().toString(36).substr(2, 5);
            console.log('我是沙', randomHash, Math.random().toString(36));
            window.location.hash = '/scop';
        },
        testHistoryAPI() {
            // 演示History API
            const state = { page: 'scop', timestamp: Date.now() };
            history.pushState(state, 'Test Page', '/test-history');
            this.historyInfo = `History API调用:
            - pushState添加历史记录
            - 状态: ${JSON.stringify(state)}
            - URL变化但未刷新页面
            - 需要服务器配置支持直接访问`;
        },
        updateCurrentInfo() {
            this.currentUrl = window.location.href;
            this.currentPath = window.location.pathname + window.location.hash;
        },
    },
    // hash优点：
    // 1. 无需服务器特殊配置
    // 2. 兼容性更好（支持IE8+）
    // 3. 部署简单
    // 4. 适合静态网站、CDN部署
    // 特点：修改window.location.hash->会立即触发hashchange事件->Vue Router监听事件->匹配对应路由组件并更新组件，不会向服务器发送请求
    // 其实主要就是赋值用window.location.hash='/home',接着会触发hashchange;，同时也会触发popstate监听路有变化用hashchange
    // hash缺点：
    // 1. URL中有#号，不够美观
    // 2. 不利于SEO（但可通过服务端渲染解决）

    // history 优点：
    // 1. URL美观，没有#号
    // 2. 更好的SEO支持
    // 3. 符合传统URL习惯
    // 特点：使用history.pushState/replaceState；更新URL但不刷新页面；监听popstate处理浏览器前进后退；需要服务器配置支持子路由直接访问
    // window.location.pathname = '/home';window.location.href = '/home';这两种方式都会刷新页面，不可取
    //赋值是用History API（不会刷新页面）
    // history.pushState({}, '', '/home');  // 添加历史记录
    // history.replaceState({}, '', '/home');  // 替换当前记录,不会有历史记录
    // popstate只有浏览器前进后退,以及history.go/back等那几个方法候才会触发
    // history 缺点：
    // 1. 需要服务器配置支持
    // 2. 直接访问子路由会404
    // 3. 部署相对复杂
    // 特性	Hash模式	History模式
    // URL赋值	window.location.hash	history.pushState()
    // 触发事件	hashchange	popstate （仅浏览器导航）
    // 事件时机	每次路由变化都触发	只在浏览器前进后退时触发
    // Vue Router处理	事件驱动	直接调用+事件辅助
    // URL美观度	有#号	无#号，美观

    // 首页访问（无区别）：
    // http://example.com/ → 服务器返回index.html ✅
    // http://example.com/#/ → 服务器返回index.html ✅
    // 子路由访问（关键区别）：
    // hash模式：看到 # 符号 → 知道这是前端路由，不发送到服务器，只会发送#后面的内容 ->不管路由怎么变始终返回index.html

    // http://example.com/#/home → 服务器收到： http://example.com/ → 返回index.html ✅
    // http://example.com/#/about → 服务器收到： http://example.com/ → 返回index.html ✅
    // 关键： # 后面的内容永远不会发送到服务器
    // history模式：

    // http://example.com/home → 服务器收到： http://example.com/home → ❌ 可能404
    // http://example.com/about → 服务器收到： http://example.com/about → ❌ 可能404
    // 需要配置：所有路由都返回index.html
    // 服务端配置的本质
    // 就是告诉服务器："不管用户请求什么路径，只要这个文件不存在，都返回index.html"
}
</script>
<style lang="scss" scoped>
.container {
    height: 100%;

    .el-main {
        width: calc(100% - 148px);
        margin-left: 20px;
        border: 1px solid #e5e5e5;
        padding-top: 10px;
        box-sizing: border-box;
    }
}
</style>